<template>
  <a-card :style="{ boxShadow: 'none' }" :bordered="false" :bodyStyle="{ padding: '0' }">
    <a-table
        @change="pageChange"
        table-layout="fixed"
        sticky
        :row-selection="{
            selectedRowKeys: testTable.keys,
            onChange: (k: any[]) => (testTable.keys = k),
            }"
        bordered
        :loading="testTable.loading"
        :pagination="false"
        :customRow="customRow"
        :rowKey="testTable.rowKey"
        :columns="formatColumns(testColumns)"
        :data-source="testTable.data"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <a-dropdown-button trigger="click"
                             @click="testEdit(record.testId)"
                             @open-change="openChange(record as AxTest)">
            <EditOutlined/>
            <template #overlay>
              <a-menu :items="testTable.contextmenu"></a-menu>
            </template>
          </a-dropdown-button>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script setup lang="ts">
  import type {AxTest} from '@/api/modules/ax/test/types';
  import {formatColumns} from '@/utils/table/table';
  import {useArrayFilter} from '@vueuse/core';
  import type {TablePaginationConfig} from 'ant-design-vue';
  import type {FilterValue, SorterResult} from 'ant-design-vue/es/table/interface';
  import {testColumns} from '../../data/column';
  import {testEdit, testList} from '../../data/curd';
  import {displayTestMenu} from '../../data/curd';
  import {testFormConfig} from '../../data/form';
  import {testTable} from '../../data/table';
  import {useCloned} from '@vueuse/core';

  const openChange = (record: AxTest) => {
          testFormConfig.value.form = useCloned(record).cloned.value;
  };

  /* 行事件 */
  const customRow = (record: AxTest) => {
    return {
      onClick() {
        const id = (record as any)[testTable.value.rowKey]
              testFormConfig.value.form = record;
        if (!testTable.value.keys.includes(id)) {
                testTable.value.keys.push(id);
        } else {
                testTable.value.keys = useArrayFilter(testTable.value.keys, e => e !== id).value;
        }
              testTable.value.keys = [record.testId];
      },
      onDblclick() {
              testEdit(record.testId);
      },
      onContextmenu() {
        displayTestMenu(record);
      },
    };
  };

  /* 分页事件触发 */
  const pageChange = (
      pagination: TablePaginationConfig,
      filters: Record<string, FilterValue>,
      sorter: SorterResult<AxTest> | SorterResult<AxTest>[],
  ) => {
    if (pagination.current && pagination.pageSize) {
            testTable.value.query.pageNum = pagination.current;
            testTable.value.query.pageSize = pagination.pageSize;
    }
    if (!(sorter instanceof Array)) {
            testTable.value.query.isAsc = sorter.order === 'ascend' ? 'asc' : 'desc';
    }
          testList();
  };
</script>

<style lang="scss" scoped></style>
